<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框模型</title>
		<style>
			/* 外边距  所有元素具备边框以外距离 四个  上下 左右 
			   外边距问题1 行内元素: a  i  delete  只支持左右边距
			              布局  支持左右推动效果
						  解决方案: 行转块*/
			span{
				border: 1px solid red;
				/* margin外边距属性: 1个属性值: 上 右 下 左 */
				margin: 300px;  /*?  上下效果没有  ?*/
				/* margin外边距属性: 2个属性值: 上下 左右 */
				margin: 100px 200px;
				/* margin外边距属性: 3个属性值: 上 右左 下 */
				margin: 100px 200px 300px;
				/* margin外边距属性: 4个属性值: 上 右 下 左 */
				margin: 100px 200px 300px 400px;
				
			}
			h1{
				width: 50%;
				border: 1px solid red;
				/* margin外边距属性: 1个属性值: 上 右 下 左 */
				margin: 300px;  /*?  上下效果没有  ?*/
				/* margin外边距属性: 2个属性值: 上下 左右 */
				margin: 100px 200px;
				/* margin外边距属性: 3个属性值: 上 右左 下 */
				margin: 100px 200px 300px;
				/* margin外边距属性: 4个属性值: 上 右 下 左 */
				margin: 100px 200px 300px 400px;
				/* 常用属性: 自适应居中 */
				margin:auto;
				margin-left: 80px;
			}
			
			/* 外边距问题2: 外边距合并问题: 
			上下元素都存在外边距 垂直---以最大值为主*/
			/* 外边距垂直合并
			 1. margin设置一个值 上下会垂直1 去掉一个上下元素其中一个上 下外边距
			 2.padding 代替margin*/
			#parent{
				width: 200px;
				height: 200px;
				background: #00ffff;
				margin-top: 30px;
				
				/* 父元素: border: 1px solid transparent */     /* 解决上下一起动 */
				border: 1px solid transparent;
				/* 父元素: overflow: hidden;创建新块级上下文 阻止外边距合并 */
				overflow: hidden;
				
				
			}
			#child{
				
				width: 100px;
				height: 100px;
				background: #ff5500;
				margin-top: 30px;
				
			}
		</style>
	</head>
	<body>
		
		<!-- 测默认是否存在外边距
		     ul li           √
			 form input      ×
			 table tr td     ×
			 p               √
			 
			 margin: 0;-->
		
		
		<h1>外边距合并</h1>
		<div id="parent">
			<div id="child"></div>
		</div>
		
		
		<hr />
		<!-- 元素: 存在与框模型=外边距+边框+内边距+内容
		    有些元素默认存在外边距，处理方案：通配选择器，去掉元素外边距-->
		<span>行内元素</span>
		<h1>块元素</h1>
	</body>
</html>